<template>
  <div class="root">
    <m-header title="充值">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content">
      <div class="amount-con">
        <div class="amount-title">
          金额
        </div>
        <div class="amout-data">
          <span class="money-icon">￥</span>
          <mu-text-field hintText="请输入充值金额" type="number" v-model="amount" />
        </div>

      </div>

      <div class="buttonCon">
        <!--<mu-raised-button label="支付宝支付" class="raised-button" backgroundColor="#02a588" @click="recharge" />-->
        <mu-raised-button label="支付宝支付" class="raised-button" backgroundColor="#fd4ba3" @click="recharge" />
      </div>

    </div>
  </div>

</template>

<script>
  import mHeader from '../../components/header'
  import util from '../../util/util.js'
  export default {
    data() {
      return {
        amount: 0
      }
    },
    components: {
      mHeader
    },
    methods: {
      recharge() {
        if (this.amount <= 0) {
          return util.toast('请输入正确的金额');
        }
        var _this = this;

        this.$http.post('order', {
            price: _this.amount,
            type: 1
          })
          .then(function (response) {
            // console.log('success');
            // console.log(response.data.data.sn);
            var sn = response.data.data.sn;
            var url = util.getHost() + '/ar-social/api/order/' + sn + '/alipay';
            // console.log(url);
            window.location.href = url;
          }).catch(function (error) {

          });
      }
    }
  }

</script>

<style lang="less">
  /*@import "../../assets/less/common.less";*/

</style>
